<template>
	<view class="bg_fff mb-20 itemBox" @click.stop="clckItem">
		<view class="pd-20 display_row_btn_center" style="padding-right: 0;">
			<view class="itemBaseBox"  style="width: 100%;">
				<u-image :src="dataItem.mission_cover" width="130rpx" height="130rpx"></u-image>
				<view class="itemBase f_28">
					<text class="c_333333 title">{{dataItem.keyword_name||""}}</text>
					<view class="display_row_btn_center" style="margin-right: 10rpx;">
						<view class="c_333333 mt-8">成单量：<text
								class="c_C62B2C f_28">{{dataItem.order_count||0}}</text>
						</view>
						<view class="c_333333 mt-8">搜索量：<text
								class="c_C62B2C f_28">{{dataItem.search_count||0}}</text>
						</view>
						<view class="c_333333 mt-8">收益：<text
								class="c_C62B2C f_28">￥{{dataItem.amount||0}}</text>
						</view>
					</view>
					<text class="c_333333">订单时间：{{$u.timeFormat(dataItem.order_create_at, 'yyyy-mm-dd')}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "KeywordOrderItem",
		props: {
			dataItem: {
				type: Object,
				default: null
			}
		},
		data() {
			return {

			};
		},
		methods: {
			clckItem() {
				this.$emit("clickItem", this.dataItem);
			},
			showTime(time) {
				return time.substring(0, 11)
			}
		}
	}
</script>

<style scoped>
	.itemBox {
		width: 96%;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin-left: 2%;
	}

	.itemBaseBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.itemBase {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-left: 20rpx;
		flex: 2;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.status {
		border: 1px solid #C62B2C;
		border-radius: 10rpx;
		padding: 10rpx;
	}

	.sn {
		padding: 20rpx 25rpx;
	}
</style>
